<template>
    <div class="app-container">
        <!--搜索功能 -->
        <div class="filter-container">
            <el-select
                v-model="pid"
                placeholder="请选择科室名称"
                clearable
                @clear="pid = null"
            >
                <el-option
                    v-for="item in depts"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>
            <el-select
                v-model="pid"
                placeholder="请选择角色名称"
                clearable
                @clear="pid = null"
            >
                <el-option
                    v-for="item in depts"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>
            <el-button
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
            >
            </el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px"
                type="primary"
                icon="el-icon-edit"
                @click="dialogAddVisible = true"
            >
                新增规则
            </el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px"
                type="danger"
                icon="el-icon-delete"
                @click="deleteBatch()"
            >
                批量删除
            </el-button>
        </div>

        <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="ID" width="100">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="规则名称" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.ruleName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="规则描述" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="科室名称" width="110" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.deptName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建人" width="110" align="center">
                <template slot-scope="scope">
                    {{ scope.row.operatorName }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="110" align="center">
                <template slot-scope="scope">
                    {{ scope.row.operateTime }}
                </template>
            </el-table-column>
            <el-table-column
                label="状态"
                width="110"
                align="center"
                :formatter="formatStatus"
            >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleRuleItems(scope.$index, scope.row)"
                        >排班规则</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleGenerate(scope.$index, scope.row)"
                        >生成排班计划</el-button
                    >
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
            <!-- <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column> -->
            <!-- <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column> -->
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>

        <el-dialog title="新增挂号等级" :visible.sync="dialogAddVisible">
            <el-form :model="form">
                <el-form-item label="等级编码" :label-width="formLabelWidth">
                    <el-input v-model="form.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="等级名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号费" :label-width="formLabelWidth">
                    <el-input-number
                        v-model="form.price"
                        :precision="2"
                        :step="1"
                        :max="100"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="排序序号" :label-width="formLabelWidth">
                    <el-input-number
                        v-model="form.sortNo"
                        :min="1"
                        :max="10"
                        label="排序"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="启用" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEmp()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="更新挂号等级" :visible.sync="dialogUpdateFormVisible">
            <el-form :model="form">
                <el-form-item label="等级编码" :label-width="formLabelWidth">
                    <el-input v-model="form.code" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="等级名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="挂号费" :label-width="formLabelWidth">
                    <el-input-number
                        v-model="form.price"
                        :precision="2"
                        :step="1"
                        :max="100"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="排序序号" :label-width="formLabelWidth">
                    <el-input-number
                        v-model="form.sortNo"
                        :min="1"
                        :max="10"
                        label="排序"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="启用" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateFormVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="updateEmp()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
            :visible.sync="dateDialogVisible"
            width="670px"
            title="生成排班计划表"
            @close="getDeplist"
        >
            <div>
                <span class="demonstration">开始时间:</span>
                <el-date-picker
                    v-model="dateValue1"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
                <span style="margin-left: 30px" class="demonstration"
                    >结束时间:</span
                >
                <el-date-picker
                    v-model="dateValue2"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </div>
            <div style="text-align: right; margin-top: 30px">
                <el-button type="danger" @click="dateDialogVisible = false"
                    >取消</el-button
                >
                <el-button type="primary" @click="generateSkd"
                    >生成排班表</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>


<script>
import {
    pageInfo,
    getById,
    add,
    update,
    deleteById,
    deleteByIds,
} from "@/api/sms/rule";

import { getParentDept } from "@/api/sms/dept";
import {createScheduling} from "@/api/sms/skd"

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            list: null,
            listLoading: true,
            formLabelWidth: "120px",
            dialogUpdateFormVisible: false,
            dialogAddVisible: false,
            dialogVisible: false,
            dateDialogVisible: false,
            form: {
                code: "",
                name: "",
                price: "0.00",
                sortNo: "1",
                status: 1,
            },
            currentPage: 1,
            pageSize: 5,
            total: 10,
            deptName: "",
            pid: null,
            ids: [],
            depts: [],
            dateValue1: null,
            dateValue2: null,
            ruleId: null,
        };
    },
    created() {
        this.loadData();

        getParentDept().then((res) => {
            if (res.code == 200) {
                this.depts = res.data;
            }
        });
    },
    methods: {
        formatStatus(row, column) {
            return row.status == 1 ? "是" : row.status == 0 ? "否" : "未作备注";
        },
        handleFilter() {
            this.loadData();
        },
        loadData() {
            this.listLoading = true;
            pageInfo({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                deptName: this.deptName,
                pid: this.pid,
            }).then((response) => {
                this.list = response.data.dataList;
                this.total = response.data.total;
                this.listLoading = false;
            });
        },
        addEmp() {
            add(this.form).then((response) => {
                this.dialogAddVisible = false;
                this.loadData();
            });
        },
        updateEmp() {
            update(this.form).then((response) => {
                this.dialogUpdateFormVisible = false;
                this.loadData();
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.loadData();
        },
        handleEdit(index, row) {
            getById({ id: row.id }).then((response) => {
                this.form = response.data;
                this.dialogUpdateFormVisible = true;
            });
        },
        openDelConfirm(name) {
            return this.$confirm(`此操作将删除 ${name}, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            });
        },
        handleRuleItems(index, row) {
            this.$router.push({path: "/skd/item", query: {deptId: 4, ruleId: row.id}});
        },
        handleDelete(index, row) {
            this.openDelConfirm(row.name).then(() => {
                deleteById({ id: row.id }).then((response) => {
                    this.loadData();
                });
            });
        },
        deleteBatch() {
            this.openDelConfirm("多条记录").then(() => {
                deleteByIds(this.ids).then((response) => {
                    this.loadData();
                });
            });
        },
        handleSelectionChange(val) {
            console.log(val);
            this.ids = val
                .map((item) => item.id)
                .toString()
                .split(",");
        },
        handleGenerate(index, row) {
            this.ruleId = row.id
            this.dateDialogVisible = true;
        },
        generateSkd() {
            let data = {};
            data.ruleId = this.ruleId;
            data.startDate = this.dateValue1;
            data.endDate = this.dateValue2;
            console.log(data);
            createScheduling(data).then((res) => {
                this.$notify({
                    title: "成功",
                    message: res.message,
                    type: "success",
                    duration: 2000,
                });
            });
            this.dateDialogVisible = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    .roles-table {
        margin-top: 30px;
    }
    .permission-tree {
        margin-bottom: 30px;
    }
}
</style>
